<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>二维码美化</title>
	<%@include file="/WEB-INF/views/include/head.jsp" %>
	
	<link href="${ctxStatic}/qrcode/jeesite.min.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/qrcode/22101e7e5dc572506ca51e6f0b7e4a3c.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/qrcode/bdsstyle.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/jquery/jquery.bigcolorpicker.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/jquery/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/bootstrap/slider/css/slider.css" type="text/css" rel="stylesheet" />
	
	<script src="${ctxStatic}/qrcode/bds_s_v2.js" type="text/javascript"></script>
	<script src="${ctxStatic}/qrcode/h.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	
	<script src="${ctxStatic}/jquery/" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery/jquery.bigcolorpicker.js" type="text/javascript"></script>
	<script src="${ctxStatic}/bootstrap/slider/js/bootstrap-slider.js" type="text/javascript"></script>
	<script type="text/javascript" src="${ctxStatic }/jquery/jquery.jqprint-0.3.js"></script>
	<script type="text/javascript">
	
	function preview(){
		
		var viewUrl = "http://qr.liantu.com/api.php?text=${qrCode.content}";
		var bg = $("#backColor_id").val();
		var fg = $("#foreColor_id").val();
		var gc = $("#gradulColor_id").val();
		var el = 'h';//$("#backColor_id").val();
		var w= $("#qrCodeSize").val();
		var m = $("#backColor_id").val();		//静区（外边距）
		var pt = $("#pointColor_id").val();		//定位点颜色（外框）
		var inpt = $("#innerPointColor_id").val();
		var logo = $("#logo").val();
		
		
		if(bg!=''){
			viewUrl=viewUrl+"&bg="+bg;
		}
		if(fg!=''){
			viewUrl=viewUrl+"&fg="+fg;
		}
		if(gc!=''){
			viewUrl=viewUrl+"&gc="+gc;
		}
		if(el!=''){
			viewUrl=viewUrl+"&el="+el;
		}
		if(w!=''){
			viewUrl=viewUrl+"&w="+w;
		}
		if(pt!=''){
			viewUrl=viewUrl+"&pt="+pt;
		}
		if(inpt!=''){
			viewUrl=viewUrl+"&inpt="+inpt;
		}
		if('' != '${qrCode.id}'){
			viewUrl=viewUrl+"&logo="+logo;
		}
		
		
		//viewUrl=viewUrl+"&bg="+bg+"&fg="+fg+"&gc="+gc+"&el="+el+"&w="+w+"&m="+m +"&pt="+pt +"&inpt="+inpt +"&logo=" +logo;
		viewUrl=viewUrl.replace(/#/g,"");
		//document.write(viewUrl);
		//alert(viewUrl);
		var param = {'viewUrl':viewUrl,'id':'${qrCode.id}'}; 
		$.post("${ctx}/momarketing/qrCode/urlqrcode", param,
			function(data){
				var imgurl = $('#myqrCodeImg').attr("src");	
				$('#myqrCodeImg').attr('src','');
				$('#myqrCodeImg').attr('src',imgurl);
				
	         }  
	      );
		
		//$('#myqrCodeImg').attr("src",viewUrl);
	}	
	
	
	function print(){
			$("#imgdiv").jqprint(); 
	}
	
	function download(){
		
	}
	
	
	</script>
	
	
</head>
<body>
	<div id="myModal${gift.id }"   
					  aria-labelledby="myModalLabel" aria-hidden="true" >
					  <div class="row-fluid" >
							<div class="span6" align="center" >
								 <div class="qrimg" id="imgdiv" align="center" >
					  				<img id="myqrCodeImg" alt="" src="${root }/servlet/qrc?qrcodeId=${qrCode.id}&action=v"  style="height:230px;width:230px;margin:5px"/>
					  			 </div>
								<div align="center" style="margin-left:30px;" >
							  			<table id="myt" width="100%" >
							  				<tr>
							  					<td>
										  			<button class="btn" onclick="preview()">预览</button>
							  					
							  					</td>
							  					<td>
										  			<button class="btn" onclick="print()" >打印</button>
							  					</td>
							  					<td>
										  			<a class="btn" href="${root }/servlet/qrc?qrcodeId=${qrCode.id}&action=d">下载</a>
							  					
							  					</td>
							  				</tr>
							  			</table>
						  		</div>	 
						  		
					  			
							</div>
			<div class="span6" style="margin-top:10px;">
				<form id="qrcodeForm" class="form-horizontal" action="">
					<ul class="nav nav-tabs myTab" id="myTab">
						<li class="active"><a href="#base">基本设置</a></li>
						<li class=""><a href="#colorsetting">颜色设置</a></li>
						<li class=""><a href="#logosetting">嵌入LOGO</a></li>
					</ul>

					<div class="tab-content" style="margin-top: 10px;">
						<div class="tab-pane active" id="base">
							<div class="control-group"   >
								  尺寸：<input
									name="size" id="qrCodeSize"  readonly="readonly"  input input-small " value="200" type="text">
									<br>
									<br>
									<br>
									 
								<div id="myslider" class="slider slider-horizontal" style="width: 250px; ">
								</div>
								
							</div>
							<div class="control-group">
								容错：
								<input name="errorLevel"  	type="radio" value="l"> 7% 
								<input name="errorLevel" 	type="radio" value="m"> 15%  
								<input name="errorLevel" 	type="radio" value="q"> 25% 
								<input name="errorLevel" 	type="radio" value="h" checked="checked"> 30% 
							</div>
							<div class="control-group" style="display:none">
								样式： <input 	type="radio" name="qrStyle" value="1"> 液态 
								<input 	type="radio" name="qrStyle" value="0"> 直角 
								<input 	type="radio" name="qrStyle" value="2"> 圆角
								<input 	type="radio" name="qrStyle" value="3"> 花纹
								
							</div>
						</div>
						<div class="tab-pane" id="colorsetting">
							<div class="control-group">
							<input name="foreColor" id="foreColor_id"  value="#000000"	type="hidden"/>
							 前景颜色:    <span id="foreColor"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
									
							</div>
							<div class="control-group">
								背景颜色：<input
									name="backColor" id="backColor_id"  value="#FFFFFF"		type="hidden">
									<span id="backColor"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
							</div>
							<div class="control-group">
								渐变颜色：<input
									name="gradulColor" id="gradulColor_id"  value=""		type="hidden">
									<span id="gradulColor"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
							</div>
							<div class="control-group">
								外 边 框 : <input
									name="outBoder" id="outBoder_id"  value=""	type="hidden">
									<span id="outBoder"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
							</div>
							<div class="control-group">
								定位点外框：<input
									name="pointColor" id="pointColor_id"   value=""   type="hidden">
									<span id="pointColor"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
							</div>

							<div class="control-group">
								定位点内点：<input
									name="innerPointColor" id="innerPointColor_id"   value=""  type="hidden">
									<span id="innerPointColor"   class="qrColor" style="background:#000000;width:20px;height:20px;">  &nbsp;&nbsp;&nbsp;&nbsp; </span>
							</div>

						</div>
						<div  class="tab-pane" id="logosetting"> 
							<input id="logo" type="hidden"/>
						  上传Logo:	 <button id="uploadify" class="btn">Logo</button>
						
						</div>
					</div>

				</form>
			</div>

		</div>
	 </div>
</body>

<script type="text/javascript">
$('#myTab a').click(function (e) {
	  e.preventDefault();
	  $(this).tab('show');
	})
	
	
		$(".qrColor").bigColorpicker(function(el,color){
			$(el).css("backgroundColor",color);
			var id = $(el).attr("id");
			$("#"+id+"_id").val(color);
	});
	
	
   $(document).ready(function()
        {
	   
	   			
	   
			   $('#myslider').slider({
				   step:20,
				   max:400,
				   min:200 ,
				   value:200
			   }).on('slideStop', function(ev){
			   		var v = ev.value	;
			   		$("#qrCodeSize").val(v);
			   });
			   
			   $('#myslider').slider('setValue', 200);
            
            $("#uploadify").uploadify({
        		height        : 30,
        		swf           : '${ctxStatic}/jquery/uploadify/uploadify.swf',
        		uploader      : '${ctx}/momarketing/qrCode/uploadicon/${qrCode.id}.html',
        		width         : 120,
        		buttonText    : '上传Logo',
        		fileTypeExts  : '*.png; *.jpg;',
        		uploadLimit : 1,
        		onUploadSuccess:function(file, data, response){  
                    //alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
                     $("#logo").val("http://42.96.189.145/zxims/userfiles/icons/${qrCode.id}.jpg");
                },  
        	});
        });  
	
	
	
</script>
</html>
